<script setup lang="ts">
import {
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
} from 'vue'
onBeforeMount(() => {
  // 虚拟DOM已构建完毕，但尚未渲染到页面。此时还不能访问真实的DOM元素。虽然数据已经准备就绪
  console.log(`onBeforeMount`)
})

onMounted(() => {
  console.log(
    // 利用onMounted钩子，保证了在获取数据和操作DOM时，组件已经完全渲染到页面上，因此访问和操作都是安全的。保证了用户界面的及时响应，提供了更加灵活和可控的组件操作能力。
    // 组件已挂载到页面，此时可以安全地访问和操作DOM元素。发起网络请求获取数据，并进行用户界面的相关配置
    `onMounted`,
  )
})

onBeforeUpdate(() => {
  console.log(
    // 由于响应式数据的变化，组件即将更新。
    // 虚拟 DOM 重新渲染之前被触发。可以获取更新前的数据状态，但避免在此处修改状态，否则可能导致无限更新循环。可以在更新前进行数据比对或执行相关操作。
    `onBeforeUpdate`,
  )
})

onUpdated(() => {
  console.log(
    // 组件更新完毕，DOM 树已同步更新。进行依赖于最新 DOM 的操作。
    // 需谨慎修改数据，以防无限循环。每次数据更新导致DOM重新渲染后，都可以进行相关操作。
    `onUpdated`,
  )
})

onBeforeUnmount(() => {
  console.log(
    // 组件卸载前执行。此时进行资源清理工作，如清除定时器、移除事件监听器。
    // 在Vue应用中管理资源和优化性能至关重要，尤其是在处理定时器和事件监听器时。应用运行时可能会导致意外的行为或性能问题。
    `onBeforeUnmount`,
  )
})

onUnmounted(() => {
  // 组件已完全卸载，所有相关资源已释放。
  // 可进行最后的清理工作或执行通知操作。
  // 所有与组件相关的侦听器和绑定都被自动解除。
  // 组件中的计时器或额外操作在组件不再使用时停止。
  // 通常用来进行额外的资源清理或状态重置工作，这些清理通常与组件外部的系统或服务有关。
  // 在某些应用场景中，除了自动处理的事件监听器和响应式依赖，还存在其他需要手动清理的情况。比如组件在运行过程中手动添加到DOM元素上的事件监听器。
  // 在组件销毁后还可能遗留一些没有自动清理的副作用。
  console.log(`onUnmounted`)
})
</script>

<template>
  <main></main>
</template>